﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Grids - Cells with Custom Check Box</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="../../../css/samples.css" />
    <link rel="stylesheet" href="../../../css/integralui.css" />
    <link rel="stylesheet" href="../../../css/integralui.checkbox.css" />
    <link rel="stylesheet" href="../../../css/integralui.treegrid.css" />
    <link rel="stylesheet" href="../../../css/themes/theme-flat-blue.css" />
    <script type="text/javascript" src="../../../external/angular.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.checkbox.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.lists.min.js"></script>
    <script type="text/javascript" src="../../../js/angular.integralui.treegrid.min.js"></script>
    <script type="text/javascript">
 		angular
			.module("appModule", ["integralui"])
			.controller("appCtrl", ["$scope", "$timeout", "IntegralUITreeGridService", function($scope, $timeout, $gridService){
				$scope.gridName = "gridSample";
				$scope.gridLines = 'vertical';

				$scope.columns = [
					{ 
						id: 9,
					 	contentAlignment: 'center',
					 	editorType: 'checkbox',
					 	editorSettings: { 
					 		style: {
					 			general: 'checkbox',
					 			box: {
						 			general: 'checkbox-box',
						 			checked: 'checkbox-checked',
						 			unchecked: 'checkbox-unchecked'
						 		}
					 		}
					 	},
					 	width: 45,
					 	fixedWidth: true
					},
					{ id: 2, headerText: "Continents/Countries", width: 250 },
					{ id: 3, headerText: "Population", headerAlignment: "center", contentAlignment: "right", width: 125 },
					{ id: 4, headerText: "Date", headerAlignment: "center", contentAlignment: "center", width: 120 },
					{ id: 6, headerText: "Land in km2", headerAlignment: "center", contentAlignment: "right", width: 90 },
					{ id: 7, headerText: "Capital", headerAlignment: "center", width: 120 }
				];

				$scope.rows = [
					{ 
						id: 1,
						text: "Africa",
						expanded: false,
						cells: [{ cid: 9 }, { cid: 2, text: "Africa" }],
						rows: [
							{ id: 11, pid: 1, text: "Egypt", enabled: false, cells: [{ cid: 9 }, { cid: 2, text: "Egypt" }, { cid: 3, text: "88,311,000" }, { cid: 4, text: "06 Apr 2015" }, { cid: 6, text: "995,450" }, { cid: 7, text: "Cairo" }] },
							{ id: 12, pid: 1, text: "Nigeria", cells: [{ cid: 9 }, { cid: 2, text: "Nigeria" }, { cid: 3, text: "185,043,000" }, { cid: 4, text: "01 Jul 2015" }, { cid: 6, text: "910,768" }, { cid: 7, text: "Abuja" }] },
							{ id: 13, pid: 1, text: "South Africa", cells: [{ cid: 9 }, { cid: 2, text: "South Africa" }, { cid: 3, text: "54,002,000" }, { cid: 4, text: "01 Jul 2014" }, { cid: 6, text: "1,214,470" }, { cid: 7, text: "Pretoria" }] }
						]
					},
					{ 
						id: 2,
						text: "Asia",
						enabled: false,
						expanded: false,
						cells: [{ cid: 9 }, { cid: 2, text: "Asia" }],
						rows: [
							{ id: 21, pid: 2, text: "China", cells: [{ cid: 9 }, { cid: 2, text: "China" }, { cid: 3, text: "1,369,140,000" }, { cid: 4, text: "06 Apr 2015" }, { cid: 6, text: "9,326,410" }, { cid: 7, text: "Beijing" }] },
							{ id: 22, pid: 2, text: "India", cells: [{ cid: 9 }, { cid: 2, text: "India" }, { cid: 3, text: "1,269,545,000" }, { cid: 4, text: "01 Jul 2015" }, { cid: 6, text: "2,864,021" }, { cid: 7, text: "New Delhi" }] },
							{ id: 23, pid: 2, text: "Japan", enabled: false, cells: [{ cid: 9 }, { cid: 2, text: "Japan" }, { cid: 3, text: "126,910,000" }, { cid: 4, text: "01 Mar 2015" }, { cid: 6, text: "364,485" }, { cid: 7, text: "Tokyo" }] },
							{ id: 24, pid: 2, text: "Saudi Arabia", enabled: false, cells: [{ cid: 9 }, { cid: 2, text: "Saudi Arabia" }, { cid: 3, text: "31,521,418" }, { cid: 4, text: "01 Jul 2015" }, { cid: 6, text: "2,149,690" }, { cid: 7, text: "Riyadh" }] },
							{ id: 25, pid: 2, text: "South Korea", cells: [{ cid: 9 }, { cid: 2, text: "South Korea" }, { cid: 3, text: "51,342,881" }, { cid: 4, text: "01 Jan 2015" }, { cid: 6, text: "100,032" }, { cid: 7, text: "Seoul" }] }
						]
					},
					{ 
						id: 3,
						text: "Europe",
						cells: [{ cid: 9 }, { cid: 2, text: "Europe" }],
						rows: [
							{ id: 31, pid: 3, text: "France", enabled: false, cells: [{ cid: 9 }, { cid: 2, text: "France" }, { cid: 3, text: "66,109,000" }, { cid: 4, text: "01 Mar 2015" }, { cid: 6, text: "640,427" }, { cid: 7, text: "Paris" }] },
							{ id: 32, pid: 3, text: "Germany", cells: [{ cid: 9 }, { cid: 2, text: "Germany" }, { cid: 3, text: "80,925,000" }, { cid: 4, text: "30 Jun 2014" }, { cid: 6, text: "348,672" }, { cid: 7, text: "Berlin" }] },
							{ id: 33, pid: 3, text: "Italy", enabled: false, cells: [{ cid: 9 }, { cid: 2, text: "Italy" }, { cid: 3, text: "60,788,845" }, { cid: 4, text: "30 Nov 2014" }, { cid: 6, text: "294,140" }, { cid: 7, text: "Rome" }] },
							{ id: 34, pid: 3, text: "Macedonia", cells: [{ cid: 9 }, { cid: 2, text: "Macedonia" }, { cid: 3, text: "2,065,769" }, { cid: 4, text: "31 Dec 2013" }, { cid: 6, text: "25,433" }, { cid: 7, text: "Skopje" }] }
						]
					},
					{ 
						id: 4,
						text: "North America",
						cells: [{ cid: 9 }, { cid: 2, text: "North America" }],
						rows: [
							{ id: 41, pid: 4, text: "Canada", cells: [{ cid: 9 }, { cid: 2, text: "Canada" }, { cid: 3, text: "35,702,707" }, { cid: 4, text: "01 Jan 2015" }, { cid: 6, text: "9,093,507" }, { cid: 7, text: "Ottawa" }] },
							{ id: 42, pid: 4, text: "Mexico", enabled: false, cells: [{ cid: 9 }, { cid: 2, text: "Mexico" }, { cid: 3, text: "121,005,815" }, { cid: 4, text: "01 Jul 2015" }, { cid: 6, text: "1,943,945" }, { cid: 7, text: "Mexico City" }] },
							{ id: 43, pid: 4, text: "USA", cells: [{ cid: 9 }, { cid: 2, text: "USA" }, { cid: 3, text: "320,651,000" }, { cid: 4, text: "07 Apr 2015" }, { cid: 6, text: "9,161,966" }, { cid: 7, text: "Washington" }] }
						]
					},
					{ 
						id: 5,
						text: "South America",
						enabled: false,
						cells: [{ cid: 9 }, { cid: 2, text: "South America" }],
						rows: [
							{ id: 51, pid: 5, text: "Argentina", cells: [{ cid: 9 }, { cid: 2, text: "Argentina" }, { cid: 3, text: "43,131,966" }, { cid: 4, text: "01 Jul 2015" }, { cid: 6, text: "2,736,690" }, { cid: 7, text: "Buenos Aires" }] },
							{ id: 52, pid: 5, text: "Brazil", cells: [{ cid: 9 }, { cid: 2, text: "Brazil" }, { cid: 3, text: "204,134,000" }, { cid: 4, text: "08 Apr 2015" }, { cid: 6, text: "8,460,415" }, { cid: 7, text: "Brasília" }] }
						]
					}
				];

				var updateCheckValues = function(){
					var list = $gridService.getFlatList($scope.gridName, true);

					for (var i = 0; i < list.length; i++)
						list[i].cells[0].value = list[i].enabled != false;
				}

				var loadTimer = $timeout(function(){
					$gridService.expandColIndex($scope.gridName, 1);
					updateCheckValues();

					$timeout.cancel(loadTimer);
				}, 1);

				$scope.onCellValueChanged = function(e){
					if (e.row){
						e.row.enabled = (e.value == true || e.value == 'checked') ? true : false;
						if (e.value == false)
							$gridService.collapse($scope.gridName, e.row);
						else
							$gridService.expand($scope.gridName, e.row);

						var refreshTimer = $timeout(function(){
							$gridService.updateView($scope.gridName);

							$timeout.cancel(refreshTimer);
						}, 1);
					}
				}
			}]);
    </script>
    <style type="text/css">
		.feature-content
		{
			width: 750px;
		}
		.directive
		{
			border: thin solid #cecece;
        	width: 800px;
        	height: 300px;
		}
		.checkbox
		{
			width: 38px;
			margin: auto;
		}
		.checkbox-box
		{
	        border: 0;
	        display: inline-block;
			width: 38px;
			height: 14px;
		}
	    .checkbox-checked
	    {
	        color: red;
	        background-image: url("../../../resources/checkbox/checkbox-checked-5.png");
	    }
	    .checkbox-unchecked
	    {
	        background-image: url("../../../resources/checkbox/checkbox-unchecked-5.png");
	    }
    </style>
</head>
<body>
	<div class="header">
        <div class="header-content">
		    <h1><span style="color:#c60d0d">IntegralUI</span> Studio <span style="font-size:0.75em; font-style:italic">for Web</span></h1>
        </div>
        <hr class="head-separator" />
    </div>
    <div class="content" ng-app="appModule">
        <div class="feature" ng-controller="appCtrl">
	        <h2 class="feature-title">Grids / Cells with Custom Check Box</h2>
	        <div class="feature-content">
	            <div style="display:inline-block">
	                <iui-treegrid name="{{gridName}}" class="directive" columns="columns" rows="rows" show-footer="false" cellvalue-changed="onCellValueChanged(e)" allow-cell-focus="false"></iui-treegrid>
                    <br style="clear:both;"/>
                </div>
                <div class="feature-help" style="margin:0">
                    <p><span class="initial-space"></span>An example on how to customize the appearance of check boxes in TreeGrid.</p>
                    <p><span class="initial-space"></span>Instead of showing a check mark for checked state and an empty box for unchecked state of check boxes, we are using custom images. Depending on check box state, you can apply a different image. This is done by overriding the default styles of CheckBox with custom styles, which can be applied through code.</p>
                    <p><span class="initial-space"></span>This sample also shows, how to disable a row at run-time. The row will become enabled/disabled depending on the state of its check box, checked/unchecked. Whenever a row is disabled, all mouse clicks are excluded and it is also excluded from keyboard navigation.</p>
                    <p><span class="initial-space"></span>For more information check out the source code of this sample.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
